<template>
  <div class="user-page">
    <van-nav-bar fixed title="个人中心" />
    <div class="title-padding"></div>
    <div class="user">
      <!-- <img :src="avatar" alt="" /> -->
      <img src="../assets/img/zhelilogo.png" alt="" />
      <div>
        <h3>{{ username }}</h3>
        <h3>欢迎回来~~</h3>
      </div>
    </div>
    <van-grid clickable :column-num="3" :border="false">
      <van-grid-item icon="diamond-o" text="发起申请" to="/apply" />
      <van-grid-item icon="bookmark-o" text="申请记录" to="/record" />
      <van-grid-item icon="thumb-circle-o" text="校园动态" to="/infomation" />
    </van-grid>
    <van-cell-group class="mt20">
      <van-cell icon="smile" title="修改账号信息" is-link to="/user-center" />
      <van-cell icon="friends" title="我的推荐人" is-link to="/recommend" />
      <van-cell icon="map-marked" title="我的地址" is-link to="/address" />
      <van-cell icon="setting" title="车辆登记" is-link to="/car" />
      <van-cell icon="clear" @click="logout" title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>
/* eslint-disable */
import { getUserInfo } from "@/api/register";
import { delToken } from "@/utils/storage";
import { getLocal } from "@/utils";
import cloneDeep from "lodash/cloneDeep";
import {visitor_logout} from "@/api"
export default {
  name: "user-page",
  data() {
    return {
      username: "钟港城",
      avatar: "../assets/img/zhelilogo.png",
    };
  },
  async created() {
    this.getDetail();
  },
  methods: {
    async logout() {
      await visitor_logout()
      delToken();
      this.$router.push("/login");
    },
    getDetail() {
      const visitorData = getLocal("visitorData");
      this.username = visitorData.name;
    },
  },
  watch: {
    $route(to, from) {
      if (to.path == "/user") {
        this.getDetail();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title-padding {
  padding-top: 5vh;
}
.user-page {
  padding: 0 10px;
  background: #f5f5f5;
  height: 100vh;
  .mt20 {
    margin-top: 20px;
  }
  .user {
    display: flex;
    padding: 20px 0;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
    }
    h3 {
      margin: 0;
      padding-left: 20px;
      font-size: 18px;
    }
  }
}
</style>
